<template>
  <div class="home-content">
    <!--<div class="home-left">
      <div class="home-left-top">
        <div class="home-title" style="margin-bottom: 10px;">当日实时数据</div>
        <div class="home-grid-4">
          <div class="home-grid-item" v-for="item in realTimeData" :key="item.id">
            <div class="text-xs">{{ item.label }}</div>
            <div class="text-xl" style="margin: 8px 0 12px 0">{{ item.value }}</div>
            <div class="text-xs">
              <span>昨日较此时</span>
              <span class="home-real-up" v-if="item.trend === 'up'"></span>
              <span class="home-real-down" v-else></span>
            </div>
          </div>
        </div>
      </div>
      <div class="home-line-box">
        <div class="home-line-top">
          <div class="home-title">数据分析折线图</div>
          <div class="home-line-top-type">
            <div :class="{ select: oneType === 'day' }" @click="setOneType('day')">日</div>
            &lt;!&ndash;<div :class="{ select: oneType === 'month' }" @click="setOneType('month')">月</div>
            <div :class="{ select: oneType === 'year' }" @click="setOneType('year')">年</div>&ndash;&gt;
          </div>
          <div class="home-lne-top-legend">
            <div class="home-lne-top-legend" style="margin-right: 25px">
              <div class="home-legend-one"></div>
              <div>职工</div>
            </div>
            <div class="home-lne-top-legend" style="margin-right: 25px">
              <div class="home-legend-two"></div>
              <div>患者</div>
            </div>
            <div class="home-lne-top-legend">
              <div class="home-legend-three"></div>
              <div>陪护</div>
            </div>
          </div>
        </div>
        <div class="home-line-content" ref="myOneChart"></div>
      </div>
      <div class="home-line-box">
        <div class="home-line-top">
          <div class="home-title">核酸人员类型</div>
          <div class="home-line-top-type">
            <div :class="{ select: twoType === 'day' }" @click="setTwoType('day')">日</div>
            <div :class="{ select: twoType === 'month' }" @click="setTwoType('month')">月</div>
            <div :class="{ select: twoType === 'year' }" @click="setTwoType('year')">年</div>
          </div>
        </div>
        <div class="home-pie-content">
          <div class="home-pie-content-left" ref="myTwoChart"></div>
          <div class="home-pie-content-right" style="padding-top: 10px">
            <div class="home-pie-content-row" v-if="departmentData.length">
              <div style="width: 15%">排名</div>
              <div style="width: 35%">核酸检测科室</div>
              <div style="width: 15%">核酸检测数</div>
              <div style="width: 15%">占比</div>
              <div style="width: 20%;text-align: right;">环比昨日</div>
            </div>
            <div class="home-pie-content-row bold" v-for="item in departmentData" :key="item.ranking">
              <div style="width: 15%">{{ item.ranking }}</div>
              <div style="width: 35%">{{ item.department }}</div>
              <div style="width: 15%">{{ item.quantity }}</div>
              <div style="width: 15%">{{ item.proportion }}</div>
              <div style="width: 20%;text-align: right;">
                <span>{{ item.contrast }}</span>
                <span class="home-up" v-if="item.trend === 'up'"></span>
                <span class="home-down" v-else></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-right">
      <div class="home-line-box" style="margin-top: 0;min-height: 372px">
        <div class="home-line-top">
          <div class="home-title">检测占比</div>
          <div class="home-line-top-type">
            <div :class="{ select: threeType === 'day' }" @click="setThreeType('day')">日</div>
            <div :class="{ select: threeType === 'month' }" @click="setThreeType('month')">月</div>
            <div :class="{ select: threeType === 'year' }" @click="setThreeType('year')">年</div>
          </div>
        </div>
        <div>已接收采样总量：3598</div>
        <div ref="myThreeChart" style="flex: 1"></div>
      </div>
      <div class="home-line-box" style="min-height: 456px">
        <div class="home-line-top">
          <div class="home-title">检测项目排比</div>
          <div style="color: #1890FF;cursor: pointer;">查看更多</div>
        </div>
        <div class="home-ranking">
          <div class="home-ranking-top">
            <div>
              <img
                      src="http://spdb.jkjn365.com.cn/image/default/D04AAA8C0D044430B64468F5A6F9AB08-6-2.png"
                      style="width: 56px;height: 56px"
              />
              <div style="color: #1890FF;font-weight: bold;">TOP 2</div>
              <div style="font-size: 12px">核酸单检</div>
            </div>
            <div style="padding-bottom: 50px">
              <img
                      src="http://spdb.jkjn365.com.cn/image/default/DAB777A107274094861BC836472813C5-6-2.png"
                      style="width: 56px;height: 56px"
              />
              <div style="color: #F9AD78;font-weight: bold;">TOP 1</div>
              <div style="font-size: 12px">核酸混检</div>
            </div>
            <div>
              <img
                      src="http://spdb.jkjn365.com.cn/image/default/4E48139BC1CE4ABC85A844E183E3D787-6-2.png"
                      style="width: 56px;height: 56px"
              />
              <div style="color: #30C5E7;font-weight: bold;">TOP 3</div>
              <div style="font-size: 12px">核酸免费</div>
            </div>
          </div>
          <div class="home-ranking-list">
            <div class="home-ranking-item" v-for="item in backwardRankingData" :key="item.id">
              <div class="home-ranking-item-bubble">{{ item.id }}</div>
              <div class="home-ranking-item-line"></div>
              <div>{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>-->
    <img
            src="/pagemain.jpg"
            class="image"
    >
  </div>
</template>

<script>
    import * as echarts from 'echarts'
    import { STable, Ellipsis } from '@/components'
    import { deleteAction, getAction, postAction } from '@/api/manage'

    const colors = [
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#3399FF' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#73C5FF' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#F7AB6A' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#FFB8B2' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#17C9E6' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#8CDBFF' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#B766FE' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#FA96FA' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        }
    ]

    export default {
        name: 'Analysis',
        computed: {
            backwardRankingData() {
                return this.rankingData.splice(3)
            }
        },
        data() {
            return {
                realTimeData: [
                ],
                oneType: 'day',
                twoType: 'day',
                threeType: 'day',
                departmentData: [],
                rankingData: [
                    {
                        id: 1,
                        label: ''
                    },
                    {
                        id: 2,
                        label: ''
                    },
                    {
                        id: 3,
                        label: ''
                    },
                    {
                        id: 4,
                        label: '新冠核酸（单检含试剂）'
                    },
                    {
                        id: 5,
                        label: '新型冠状病毒抗体检测'
                    },
                    {
                        id: 6,
                        label: '免费核酸检测（住院）'
                    },
                    {
                        id: 7,
                        label: '新冠核酸（免费）'
                    },
                    {
                        id: 8,
                        label: '新冠抗体'
                    }
                ],
                url:{
                    getrealTimeDatalist: '/system/nurseTaskDetail/getrealTimeData',
                }
            }
        },
        mounted() {
            setTimeout(() => {
                // this.getrealTimeData()
                this.initOneChart()
                this.initTwoChart()
                this.initThreeChart()
            }, 1000)
        },
        methods: {
            getrealTimeData(){
                postAction(this.url.getrealTimeDatalist, {})
                    .then(res => {
                        console.log(res.result.relist);
                        this.realTimeData=res.result.relist
                    })

            },
            // 初始化数据分析
            initOneChart() {
                // 请求类型 日月天
                const params = {
                    type: this.oneType
                }
                // 发起请求获取数据
                const data = {
                    dates: ['3.12', '3.13', '3.14', '3.15', '3.16', '3.17', '3.18', '3.19', '3.20', '3.21', '3.22', '3.23'],
                    notOrders: [1500, 1800, 2100, 3800, 1200, 4000, 5700, 1800, 1220, 2800, 7100, 1120],
                    orders: [6000, 7000, 2000, 1000, 1200, 1500, 2000, 1800, 9000, 6200, 1500, 1000],
                    allOrders: [7500, 7800, 4100, 4800, 2400, 5500, 7700, 3600, 11220, 8800, 8600, 2120]
                }
                const myChart = echarts.init(this.$refs.myOneChart)
                const option = {
                    grid: {
                        top: '7%',
                        left: '5%',
                        right: '2%',
                        bottom: '10%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                color: '#3399FF',
                                type: 'solid'
                            }
                        },
                        backgroundColor: 'rgba(66, 161, 255, 0.9)',
                        borderWidth: 0,
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    xAxis: {
                        data: data.dates
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 12000,
                        interval: 2000,
                        axisLabel: {
                            formatter: value => {
                                return `${value / 1000} K`
                            }
                        }
                    },
                    series: [
                        {
                            name: '全部预约单',
                            type: 'line',
                            showSymbol: false,
                            smooth: true,
                            areaStyle: {
                                origin: 'auto',
                                opacity: 0.1
                            },
                            itemStyle: {
                                color: '#42A1FF'
                            },
                            data: data.allOrders
                        },
                        {
                            name: '未预约',
                            type: 'bar',
                            data: data.notOrders,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#3399FF' },
                                    { offset: 1, color: '#73C5FF' }
                                ]),
                                borderRadius: [1500, 1500, 0, 0]
                            }
                        },
                        {
                            name: '已预约',
                            type: 'bar',
                            data: data.orders,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#F7AB6A' },
                                    { offset: 1, color: '#FFB8B2' }
                                ]),
                                borderRadius: [1500, 1500, 0, 0]
                            }
                        }
                    ]
                }
                myChart.setOption(option)
            },
            // 初始化用户预约类型
            initTwoChart() {
                // 请求类型 日月天
                const params = {
                    type: this.twoType
                }
                // 发起请求获取数据
                const data = [
                    { value: 1048, name: '患者陪护' },
                    { value: 212, name: '职工' }
                ]
                this.departmentData = [
                    {
                        ranking: 1,
                        department: '呼吸内科门诊',
                        quantity: 1000,
                        proportion: '13%',
                        contrast: '10%',
                        trend: 'up'
                    },
                    {
                        ranking: 2,
                        department: '胸外科',
                        quantity: 100,
                        proportion: '12%',
                        contrast: '20%',
                        trend: 'down'
                    },
                    {
                        ranking: 3,
                        department: '呼吸内科门诊',
                        quantity: 1000,
                        proportion: '13%',
                        contrast: '10%',
                        trend: 'down'
                    },
                    {
                        ranking: 4,
                        department: '胸外科',
                        quantity: 100,
                        proportion: '12%',
                        contrast: '20%',
                        trend: 'up'
                    },
                    {
                        ranking: 5,
                        department: '胸外科',
                        quantity: 100,
                        proportion: '12%',
                        contrast: '20%',
                        trend: 'up'
                    }
                ]
                // 总数
                const total = data.reduce((num, next) => num + next.value, 0)
                const myTwoChart = echarts.init(this.$refs.myTwoChart)
                const option = {
                    color: colors,
                    tooltip: {
                        trigger: 'item'
                    },
                    label: {
                        show: true,
                        position: 'outside'
                    },
                    series: [
                        {
                            name: '核酸人员类型',
                            type: 'pie',
                            radius: ['68%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}: {d}%'
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                ...data,
                                {
                                    value: 0,
                                    label: {
                                        position: 'center',
                                        formatter: '核酸检测总数 \n \n' + total,
                                        fontSize: 18
                                    },
                                    tooltip: {
                                        formatter: '核酸检测总数 \n \n ' + total
                                    }
                                }
                            ]
                        }
                    ]
                }
                myTwoChart.setOption(option)
            },
            // 初始化
            initThreeChart() {
                // 请求类型 日月天
                const params = {
                    type: this.threeType
                }
                // 发起请求获取数据
                const data = [
                    { value: 1048, name: '北门采样' },
                    { value: 735, name: '东门采样' },
                    { value: 580, name: '职工采样' },
                    { value: 484, name: '病房采样' }
                ]
                const myThreeChart = echarts.init(this.$refs.myThreeChart)
                const option = {
                    color: colors,
                    tooltip: {
                        trigger: 'item'
                    },
                    grid: {
                        top: '5%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b} \n {d}%'
                            },
                            data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                myThreeChart.setOption(option)
            },
            // 设置类型
            setOneType(type) {
                this.oneType = type
                this.initOneChart()
            },
            // 设置预约用户类型
            setTwoType(type) {
                this.twoType = type
                this.initTwoChart()
            },
            // 设置预约用户类型
            setThreeType(type) {
                this.three = type
                this.initThreeChart()
            }
        }
    }
</script>

<style lang="less" scoped>
  .home-content {
    width: 100%;
    display: flex;
  }
  .home-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }
  .home-title::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #1890ff;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 0px rgba(21, 92, 158, 0.6);
    margin-right: 8px;
  }

  .home-left {
    width: 73%;
  }

  .home-right {
    flex: 1;
    margin-left: 10px;
    border-radius: 10px;
  }

  .home-left-top {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
  }

  .home-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
  }
  .home-grid-item {
    padding: 13px 18px;
    color: white;
  }

  .home-grid-4 .home-grid-item {
    height: 130px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .home-grid-4 .home-grid-item:nth-child(1) {
    background-image: url(http://spdb.jkjn365.com.cn/image/default/B80286971DF2417CA821A68E4EA77CBE-6-2.png);
  }

  .home-grid-4 .home-grid-item:nth-child(2) {
    background-image: url(http://spdb.jkjn365.com.cn/image/default/531DA633B8124C88B8A81E6F2B549E42-6-2.png);
  }
  .home-grid-4 .home-grid-item:nth-child(3) {
    background-image: url(http://spdb.jkjn365.com.cn/image/default/9079303379DB4AFD9A0CC17EA9CDB5D3-6-2.png);
  }
  .home-grid-4 .home-grid-item:nth-child(4) {
    background-image: url(http://spdb.jkjn365.com.cn/image/default/6D6808E7C01C43CE92E788DE93586AA1-6-2.png);
  }

  .text-xs {
    font-size: 12px;
  }

  .text-xl {
    font-size: 28px;
    font-weight: bold;
  }

  .home-real-up {
    background-image: url(https://7169-qiqi-ikun-818038-1302497064.tcb.qcloud.la/other/ss.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-position: center;
    margin-left: 5px;
  }

  .home-real-down {
    background-image: url(https://7169-qiqi-ikun-818038-1302497064.tcb.qcloud.la/other/xj.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-position: center;
    margin-left: 5px;
  }

  .home-up {
    background-image: url(https://7169-qiqi-ikun-818038-1302497064.tcb.qcloud.la/other/wdss.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: center;
    margin-left: 5px;
  }

  .home-down {
    background-image: url(https://7169-qiqi-ikun-818038-1302497064.tcb.qcloud.la/other/wdxj.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: center;
    margin-left: 5px;
  }

  .home-line-box {
    min-height: 306px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .home-line-content {
    flex: 1;
  }

  .home-line-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .home-line-top-type {
    width: 144px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #ebeff5;
    display: flex;
    justify-content: space-between;
  }
  .home-line-top-type div {
    flex: 1;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }

  .home-line-top-type div.select {
    color: #1890ff;
  }
  .home-line-top-type div:nth-child(2) {
    border-left: 1px solid #ebeff5;
    border-right: 1px solid #ebeff5;
  }

  .home-lne-top-legend {
    display: flex;
    align-items: center;
  }

  .home-legend-one {
    width: 18px;
    height: 12px;
    background-color: #3399ff;
    border-radius: 6px;
    margin-right: 10px;
  }

  .home-legend-two {
    width: 18px;
    height: 12px;
    background-color: #f7ab6a;
    border-radius: 6px;
    margin-right: 10px;
  }
  .home-legend-three {
    width: 18px;
    height: 12px;
    background-color: #f748d6;
    border-radius: 6px;
    margin-right: 10px;
  }

  .home-pie-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
  }

  .home-pie-content-left {
    width: 45%;
  }

  .home-pie-content-right {
    flex: 1;
  }

  .home-pie-content-row {
    display: flex;
  }
  .home-pie-content-row.bold {
    font-weight: bold;
    padding-top: 15px;
  }

  .home-ranking-top {
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: flex-end;
    padding-top: 10px;
  }

  .home-ranking-list {
    margin-top: 40px;
  }

  .home-ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

  }
  .home-ranking-item-bubble {
    width: 21px;
    height: 21px;
    background-color: rgba(249, 173, 120, 0.15);
    border-radius: 50%;
    text-align: center;
    line-height: 21px;
    color: #F9AD78;
  }

  .home-ranking-item-line {
    border-top: 1px dashed #F9AD78;
    flex: 1;
    margin: 0 10px;
  }
</style>
